<template>
  <view class="page-container">
    <HeaderBar
      title="发现"
      navBarBgc="transparent"
      :isFixed="true"
      :isShowBackIcon="false"
    ></HeaderBar>
    <image class="poster-img" src="http://img.abatour.com/2025-05-05/7797a71bd0b823f640fc4b5f6f690390_1746439463361.png"></image>
    <view class="content-container">
      <view class="article-container">
        <view class="article-item" v-for="(item,index) in articleVideoList" :key="item.id" @click="handleNavToArticleDetail(item)">
          <template v-if="item.images && item.images.length > 0">
            <image class="media-container" v-if="item.images[0].mediaType === 'img'" :src="item.images[0].imageUrl"></image>
            <image class="media-container" v-else :src="item.headImage"></image>
<!--            <video class="media-container" v-else :src="item.images[0].imageUrl" :show-fullscreen-btn="false"></video>-->
          </template>
          <view class="article-content-container" >
            <view class="title">{{item.title}}</view>
            <view class="description-container">{{item.subTitle}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-safe"></view>
    <TabBar></TabBar>
  </view>
</template>

<script setup>
  import {ref} from 'vue';
  import HeaderBar from '@/components/HeaderBar/index.vue';
  import TabBar from "@/components/TabBar/index.vue";
  import {discoverList} from "@/api/system";

  const articleVideoList = ref([]);

  const handleNavToArticleDetail  = ( event ) => {
    console.log(event,'event');
    let { id, title } = event;
    uni.navigateTo({
      url: `/fiveMajorSubPack/pages/hospitable/newsDetail?id=${id}&title=${title}`,
      complete: (end) => {
        console.log(end,'end');
      }
    })
  };
  const queryDiscoverList = async () => {
    await discoverList({ type: 5, pageNo: 1,pageSize: 99}).then(res => {
      console.log(res,'discoverList')
      res.result.forEach(item => {
        if(item.images && item.images.length > 0){
          item.images[0].mediaType = item.images[0].imageUrl.includes('.mp4') ? 'video' : 'img';
        }
      })
      articleVideoList.value = res.result;
      console.log(articleVideoList,'articleVideoList')
    })
  };

  onShow(() => {
    queryDiscoverList();
  })
</script>

<style lang="scss" scoped>
  .page-container {
    min-height: 100vh;
    background: #eeca6c;
    .poster-img {
      width: 100vw;
      height: 1236rpx;
    }
    .content-container {
      margin:0 28rpx 0  28rpx;
      width: auto;
      .article-container {
        .article-item {
          margin-bottom: 29rpx;
          height: 500rpx;
          border-radius: 10rpx;
          overflow: hidden;
          background-color: #fff;
          .media-container {
            width: 100%;
            height: 348rpx;
          }
          .article-content-container {
            padding: 30rpx 27rpx;
            .title {
              font-size: 29rpx;
              font-weight: bold;
            }
            .description-container {
              margin-top: 15rpx;
              height: 40rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #2B2B24;
            }
          }
        }
      }
    }
    .bottom-safe {
      height: 200rpx;
      width: 100%;
    }
  }
</style>